<script setup lang="ts">
import type {CSSProperties} from 'vue';
import {computed, useTemplateRef} from 'vue';

import {JcxSpineText} from '@/components/common/shadcn';

const props = defineProps<{
  contentStyle: CSSProperties;
  isPassing: boolean;
  successText: string;
  text: string;
}>();

const contentRef = useTemplateRef<HTMLDivElement>('contentRef');

const style = computed(() => {
  const {contentStyle} = props;

  return {
    ...contentStyle,
  };
});

defineExpose({
  getEl: () => {
    return contentRef.value;
  },
});
</script>

<template>
  <div
      ref="contentRef"
      :class="{
      [$style.success]: isPassing,
    }"
      :style="style"
      class="absolute top-0 flex size-full select-none items-center justify-center text-xs"
  >
    <slot name="text">
      <JcxSpineText class="flex h-full items-center">
        {{ isPassing ? successText : text }}
      </JcxSpineText>
    </slot>
  </div>
</template>

<style module>
.success {
  -webkit-text-fill-color: hsl(0deg 0% 98%);
}
</style>
